<template>
    <div class="default-main ba-table-box">

        <div style="margin-bottom: 20px;">
            <el-row :gutter="12">
                <el-col :span="6">
                    <el-card shadow="hover">
                        <div class="content">
                            <div class="content-left">
                                <div style="width: 48px;height: 48px;color: #fff;">
                                    <Icon class="ba-upload-icon" name="el-icon-Briefcase" size="50" color="#4c7dfe" />
                                </div>
                            </div>
                            <div>
                                <span class="content-right-text">{{ SummaryData.paid_order_quantity }}</span>
                                <span class="content-right-desc">已支付订单数量</span>
                            </div>
                        </div>

                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card shadow="hover">
                        <div class="content">
                            <div class="content-left">
                                <div style="width: 48px;height: 48px;color: #fff;">
                                    <Icon class="ba-upload-icon" name="el-icon-Briefcase" size="50" color="#ffab2c" />
                                </div>
                            </div>
                            <div>
                                <span class="content-right-text">{{ SummaryData.actual_payment_amount ?? 0 }}</span>
                                <span class="content-right-desc">实际支付金额</span>
                            </div>
                        </div>

                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card shadow="hover">
                        <div class="content">
                            <div class="content-left">
                                <div style="width: 48px;height: 48px;color: #fff;">
                                    <Icon class="ba-upload-icon" name="el-icon-Briefcase" size="50" color="#ff84c0" />
                                </div>
                            </div>
                            <div>
                                <span class="content-right-text">{{ SummaryData.weChat_payment_amount ?? 0 }}</span>
                                <span class="content-right-desc">微信支付金额</span>
                            </div>
                        </div>

                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card shadow="hover">
                        <div class="content">
                            <div class="content-left">
                                <div style="width: 48px;height: 48px;color: #fff;">
                                    <Icon class="ba-upload-icon" name="el-icon-Briefcase" size="50" color="#b37feb" />
                                </div>
                            </div>
                            <div>
                                <span class="content-right-text">{{ SummaryData.alipay_payment_amount ?? 0 }}</span>
                                <span class="content-right-desc">支付宝支付金额</span>
                            </div>
                        </div>

                    </el-card>
                </el-col>

            </el-row>
        </div>
        <!-- 表格顶部菜单 -->
        <TableHeader :buttons="['refresh', 'comSearch', 'quickSearch', 'columnDisplay']"
            quick-search-placeholder="根据商品名称/收货人/主订单号模糊查询" />
        <!-- 表格 -->
        <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
        <Table />
        <!-- 详情 -->
        <detailDialog />

    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, provide, reactive } from 'vue'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import { useI18n } from 'vue-i18n'
import detailDialog from './detail.vue'
import { baTableApi } from '/@/api/common'
import baTableClass from '/@/utils/baTable'
import { info, orderDetail } from '/@/api/backend/order'
defineOptions({
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'order/list',
})
let optButtons: OptButton[] = [
    {
        render: 'tipButton',
        name: 'info',
        title: 'Detail',
        text: '',
        type: 'primary',
        icon: 'fa fa-envira',
        class: 'table-row-info',
        disabledTip: false,
        click: (row: TableRow) => {
            detailButtonClick(row.id) //详情
        }
    }

]

const SummaryData = reactive({
    actual_payment_amount: 0, //实际支付金额
    paid_order_quantity: 0, //已支付订单数量
    weChat_payment_amount: 0, //微信支付金额
    alipay_payment_amount: 0,//支付宝支付金额

})
const { t } = useI18n()
const tableRef = ref()
const baTable = new baTableClass(
    new baTableApi('/admin/v1/order/'),
    {
        column: [
            {
                label: '用户', align: 'center', operator: false, showOverflowTooltip: true, formatter(row, column, cellValue, index) {
                    if (row.user_id == 0) {
                        return "订阅订单";
                    } else {
                        return row.user.username;
                    }
                }
            },
            { label: '订单号', prop: 'order_no', align: 'center', operator: 'LIKE', operatorPlaceholder: '请输入订单号', showOverflowTooltip: true },
            { label: '实付金额', prop: 'pay_price', align: 'center', operator: 'RANGE', operatorPlaceholder: '请输入实付金额' },
            { label: '订单状态', prop: 'status_name', align: 'center', operator: false, showOverflowTooltip: true },
            { label: '订单内容', prop: 'remark', align: 'center', operator: false, showOverflowTooltip: true },
            {
                label: '下单时间',
                prop: 'create_time',
                align: 'center',
                render: 'datetime',
                sortable: 'custom',
                operator: 'RANGE',
                showOverflowTooltip: true
            },
            {
                label: '支付时间',
                prop: 'pay_time',
                align: 'center',
                render: 'datetime',
                sortable: 'custom',
                operator: 'RANGE',
                showOverflowTooltip: true
            },

            { label: t('Operate'), align: 'center', render: 'buttons', operator: false, buttons: optButtons }
        ],
        dblClickNotEditColumn: ['all'],
    },
    {},
    {},
    {
        getIndex: () => {
            getSummaryInfo(baTable.table.filter)
        },
    }
)

//头部汇总统计
const getSummaryInfo = (params: any) => {
    info(params).then((res: any) => {
        SummaryData.actual_payment_amount = res.data.actual_payment_amount //实际支付金额
        SummaryData.paid_order_quantity = res.data.paid_order_quantity //已支付订单数量
        SummaryData.weChat_payment_amount = res.data.weChat_payment_amount //微信支付金额
        SummaryData.alipay_payment_amount = res.data.alipay_payment_amount //支付宝支付金额
    })
}

//详情
const detailButtonClick = (id: string) => {

    baTable.form.extend!['detail'] = {}
    baTable.form.operate = 'Detail'
    baTable.form.loading = true
    orderDetail(id).then((res: any) => {
        baTable.form.extend!['detail'] = res.data.row
        baTable.form.loading = false
    })
}

provide('baTable', baTable)

onMounted(() => {
    baTable.table.ref = tableRef.value
    baTable.mount()
    baTable.getIndex()
})
</script>

<style scoped lang="scss">
.content {
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 4px;
    background: #ffffff;

    .content-left {
        border-radius: 50%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 60px;
        height: 60px;
        overflow: hidden;
        margin-right: 10px;
    }

    .content-right-text {
        display: block;
        color: #252631;
        font-size: 24px;
        line-height: 37px;
    }

    .content-right-desc {
        display: block;
        color: #98a9bc;
        font-size: 12px;
    }
}
</style>
